<template>
<div>
    <Modal
        v-model="confirm"
        title="确认修改"
        @on-ok="ok"
        @on-cancel="cancel">
        {{bean}}
    </Modal>
    <Button type="primary" @click="toExcel">用户导出</Button>
    <Input placeholder="Enter something..." v-model="condition"><Button slot="append" icon="ios-search" @click="clickSearch"></Button></Input>
    <Table border :columns="columns" :data="data"></Table>
    <Page :total="paging.total" @on-change="changepage" :page-size="paging.size"></Page>
</div>
</template>
<script>
import util from '../libs/util';
    export default {

        created() {
            this.initFormatter(); 
            this.paging = {
                page:1,
                size:8,
            };
            this.load_data(this.paging);
            this.columns = [
                    {
                        title: '用户ID',
                        key: 'id',
                    },
                    {
                        title: '姓名',
                        key: 'name',
                    },
                    {
                        title: '微信昵称',
                        key: 'nickname',
                    },
                    {
                        title: '头像',
                        key: 'head',
                        render: (h, params) => {
                            return h("img",{
                                    attrs: {
                                        src: params.row.avatarurl,
                                    },
                                    style:{
                                        width:"px",
                                        height:"45px",
                                    },
                                    on:{
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                            })
                     }
                    },
                    {
                        title: '学校',
                        key: 'school',
                        render: function (h, params) {
                            var value = params.row.student;
                            
                            if ( value == "") {
                                value = "尚未填写";
                            } else {
                                
                                value = params.row.student.school_name;
                                
                            }
                            return h('div', 
                               value
                            );
                        }
                    },
                    {
                        title: '学院',
                        key: 'academy',
                        render: function (h, params) {
                            var value = params.row.student;
                            
                            if ( value == "") {
                                value = "尚未填写";
                            } else {
                                
                                value = params.row.student.academy;
                                if ( value == "") {
                                    value = "尚未填写";
                                }
                                
                            }
                            return h('div', 
                               value
                            );
                        }
                    },
                    {
                        title: '性别',
                        key: 'gender',
                        render: (h, params) => {
                            var genderIcon = '女';
                            if(params.row.gender==1){
                                genderIcon='男'
                            }else {
                                genderIcon='女'
                            }
                            return h('div', [
                                h('p', genderIcon)
                            ]);
                        }
                    },
                    {
                        title: '电话',
                        key: 'phone'
                    },
                    {
                        title: '堂豆数',
                        width: 100,
                        render: (h, params) => {
                            var self = this;
                            return h('div',[
                                h('input', {
                                    domProps: {
                                        value: params.row.bean,
                                    },
                                    on : {
                                        'change' : function(e) {
                                            self.value = e.target.value
                                            if (self.value) {
                                                params.row.bean = self.value;
                                                self.updateBean(params.index, self.value);
                                            }
                                        }
                                    }
                                })
                            ])
                        }
                    },
                    {
                        title: '注册时间',
                        key: 'time',
                        render: function (h, params) {
                            return h('div', 
                               new Date(this.row.time*1000).Format('yyyy-MM-dd mm:ss')
                            );
                        }
                    },
                    {
                        title: '是否认证',
                        key: 'status',
                        render: function (h, params) {
                            var value = params.row.student;
                            
                            if ( value == "") {
                                value = "尚未提交信息";
                            } else {
                                var s = params.row.student.status;
                                if (s == 1) {
                                    value = "认证通过";
                                }
                                if (s == 2) {
                                    value = "不通过";
                                }
                                if (s == 0) {
                                    value = "未认证";
                                }
                            }
                            return h('div', 
                               value
                            );
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '详情'),
                            ]);
                        }
                    }
                ];
          
        },
        data () {
            return {
                columns: [],
                condition: '',
                data: [],
                paging: {},
                confirm: false,
                bean: 0,
                uid: 0
            }
        },
        methods: {
            load_data(paging) {
                this.$http.post(util.baseURL+"user/userlist",paging,
                    {emulateJSON: true})
                    .then(
                        (response)=>{
                            if(response.data.data) {
                              this.data = response.data.data.list;
                             // console.log(this.data);
                              this.paging.total = response.data.data.total;
                            } else {
                               this.$Message.error("暂无用户列表！");
                            }
                        },
                        (error)=>{
                            console.log(error);
                        }
                );
            },
            show (index) {
                this.$Modal.info({
                    title: '用户详细信息',
                    content: `name：${this.data[index].name}<br>
                        phone：${this.data[index].phone}<br>nickname：${this.data[index].nickname}<br>
                        openid：${this.data[index].openid}<br>password：${this.data[index].password}`
                })
            },
            changepage(page) {
                this.paging.page = page;
                if (this.condition.trim() == "") {
                    this.load_data(this.paging);
                } else {
                    this.search()
                }
            },
            clickSearch() {
                this.paging.page = 1;
                this.search();
            },
            // 搜索
            search() {
                var condition = this.condition.trim();
                if (condition == "") {
                    this.$Message.error("请输入正确的搜索条件！");
                } else {
                    var body = {
                        conditions: this.condition,
                        page : this.paging.page,
                        size : this.paging.size,
                        t : 1
                    };
                    console.log(body);
                    this.$http.post(util.baseURL+"user/searchUser",body,
                        {emulateJSON: true})
                        .then(
                            (response)=>{
                                if(response.data.data) {
                                this.data = response.data.data.list;
                                this.paging.total = response.data.data.total;
                                } else {
                                this.$Message.error("暂无商品列表！");
                                }
                            },
                            (error)=>{
                                console.log(error);
                            }
                    );
                }
            },
            initFormatter(){
                Date.prototype.Format = function(fmt) { //
                    let o = {  
                        "M+" : this.getMonth()+1,                 //月份  
                        "d+" : this.getDate(),                    //日  
                        "h+" : this.getHours(),                   //小时  
                        "m+" : this.getMinutes(),                 //分  
                        "s+" : this.getSeconds(),                 //秒  
                        "q+" : Math.floor((this.getMonth()+3)/3), //季度  
                        "S"  : this.getMilliseconds()             //毫秒  
                    };  
                    if(/(y+)/.test(fmt))  
                        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));  
                    for(var k in o)  
                        if(new RegExp("("+ k +")").test(fmt))  
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));  
                    return fmt;  
                }
            },
            ok() {
               this.$http.post(util.baseURL+"user/UpdateBeansByUid",
                {bean:this.bean, type:1, uid:this.uid},
                        {emulateJSON: true})
                        .then(
                            (response)=>{
                                this.$Message.info(response.data.msg);
                            },
                            (error)=>{
                                console.log(error);
                            }
                );
                
            },
            cancel() {
                console.log("cancel");
            },
            // 订单导出
            toExcel() {
                this.$http.get(util.baseURL+"user/exportUser",{},
                    {emulateJSON: true})
                    .then(
                        (response)=>{
                            if(response.data.data) {
                              window.open(util.baseURL+response.data.data.download);
                            } else {
                               this.$Message.error("暂无用户列表！");
                            }
                        },
                        (error)=>{
                            console.log(error);
                        }
                );
            },
            // 更新数据
            updateBean(index, value) {
                if(!isNaN(value)){
                    this.bean = value;
                    this.uid = this.data[index].id
                    this.confirm = true;
                    
                }else{
                    this.$Message.error("请填入合法数据！");
                }
            }
        }
    }
</script>
